@charset "UTF-8";
@import "index";
@import "common/reset";
@import "common";

.web {
  input[type="radio"] {
    display: none;
  }
  .gc_content {
    background-color: #FFFFFF;
    .gc_bg {
      background-color: #f5f5f5;
    }
    //图片展示
    .gc_logo {
      width: 100%;
      min-height: n(175px);
      padding: n(8px) 0;
      img {
        width: 100%;
      }
    }
    //导航栏
    .gc_nav {
      padding-bottom: n(22px);
      ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        label {
          width: 33%;
          text-align: center;
          float: left;
          display: inline-block;
          box-sizing: border-box;
          background-color: #f5f5f5;
          li {
            padding: n(30px) 0;
          }
        }
        .li_active {
          background-color: $color;
          color: white;
        }

      }
    }
    .gcd_all {
      display: none;
    }
    .gcp_all {
      display: none;
      padding-top: n(20px);
    }
    .gcontent_div_all {
      //省广介绍
      .gc_content_div {
        margin: 0 auto;
        border-bottom: n(2px) solid #e6e6e6;
        p {
          width: 90%;
          margin: 0 auto;
          padding: n(14px) 0;
          font-size: n(20px);
          color: #8b8b8b;
          text-align: justify;
          text-indent: n(40px);
        }
        .gc_picture {
          width: 90%;
          margin: n(40px) auto;
          height: n(335px);
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .gc_development {
          .gcd_list {
            width: 90%;
            margin: 0 auto;
            li:not(:first-child):nth-child(2n+1) {
              background-color: #f3f3f3;
            }
            li {
              width: 100%;
              text-align: right;
              .gcd_list_content {
                width: 90%;
                padding: n(32px) 0 n(32px) n(50px);
                display: inline-block;
                text-align: left;
                border-left: n(4px) solid #d5dfe1;
                position: relative;
                p {
                  width: 100%;
                  color: $color;
                  text-indent: 0;
                  padding: 0;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                }
                &:before {
                  content: "";
                  display: inline-block;
                  width: n(35px);
                  height: n(35px);
                  border-radius: 50%;
                  border: n(4px) solid #d4dee0;
                  position: absolute;
                  left: -11.5px;
                  top: 50%;
                  transform: translateY(-50%);
                }
                &:after {
                  content: "";
                  display: inline-block;
                  width: n(13px);
                  height: n(13px);
                  border-radius: 50%;
                  background-color: #d4dee0;
                  position: absolute;
                  left: -4px;
                  top: 50%;
                  transform: translateY(-50%);
                }
              }
            }
            .gcd_title {
              text-align: left;
              background-color: $color;
              color: #FFFFFF;
              padding: n(28px) n(25px);
              i {
                display: inline-block;
                vertical-align: middle;
                font-size: 30px;
              }
              span {
                font-size: n(30px);
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
        }
      }
      //管理团队
      .gc_person {
        width: 90%;
        margin: 0 auto n(52px) auto;
        .gcp_img {
          width: n(105px);
          height: n(126px);
          overflow: hidden;
          img {
            width: 100%;
            transform: scale(1.3, 1.3)
          }
        }
        .gcp_info {
          width: 78%;
          margin-left: n(20px);
          .gcpi_title {
            font-size: n(27px);
            color: $color;
            border-bottom: n(2px) solid $color;
          }
          p {
            font-size: n(22px);
            color: #7d7d7d;
            text-align: justify;
          }
        }
      }
    }
  }
  //战略
  .gcs_all {
    width: 100%;
    height: 100%;
    background: url("../img/GMIC/gmics_bgimg.jpg") repeat-y center/100%;
    position: absolute;
    left:0;
    top:-100%;
    transform: translateY(-100%);
    transition: transform .5s ease-in-out;
    &:after {
      content: "";
      display: inline-block;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: rgba(255, 255, 255, .8);
    }
    .close {
      position: absolute;
      right:10%;
      top:5%;
      overflow: hidden;
      z-index: 1;
      i {
        color: $color;
      }
    }
    //战略介绍
    .gc_strategic {
      width: 90%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      .gcs_title {
        text-align: center;
        margin-bottom: n(100px);
        p {
          font-size: n(73px);
          color: $color;
          b {
            display: inline-block;
            width: n(18px);
            height: n(18px);
            border-radius: 50%;
            background-color: $color;
            vertical-align: middle;
            margin: 0 n(43px);
            position: relative;
            &:before {
              content: "";
              display: inline-block;
              position: absolute;
              left: 4px;
              top: -12px;
              width: n(2px);
              height: n(66px);
              background-color: #b20000;
              transform: rotate(35deg);
            }
          }
        }
      }
      .gcs_content {
        width: 100%;
        text-align: center;
        position: relative;
        p {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          width: 100%;
          margin: n(55px) auto;
          border-radius: 50px;
          background-color: #e3e3e3;
          padding: n(7.5px) 0;
          position: relative;
          &:first-child {
            letter-spacing: 1px;
          }
          &:before {
            position: absolute;
            content: "";
            display: inline-block;
            left: 5%;
            top: 50%;
            transform: translateY(-50%);
            width: n(20px);
            height: n(20px);
            background-color: #FFFFFF;
            border: n(2px) solid $color;
            border-radius: 50%;
          }
        }
      }
    }
  }
  //选项卡
  #gc_radio_one:checked~.gc_content>.gcd_all {
    display: block
  }
  #gc_radio_two:checked~.gc_content>.gcp_all {
    display: block
  }
  #gc_checked_three:checked~.gc_content>.gcs_all {
    transform: translateY(100%);
  }
  #gc_radio_one:checked~.gc_content>.gc_nav>ul .li_GMIC {
    background-color: $color;
    color: white;
  }
  #gc_radio_two:checked~.gc_content>.gc_nav>ul .li_team {
    background-color: $color;
    color: white;
  }
}